import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import { AppOutline,AppstoreOutline,ShopbagOutline,UserOutline } from 'antd-mobile-icons';
import "./tabbar.css";
import { withRouter } from 'react-router-dom'

interface Props {
    history:any,
    location:any,
    match:any
}

interface Props {

}
class Tabbar extends Component<Props> {
    state= {
        tabs:[
            {
                key: '/index/home',
                title: '首页',
                icon: <AppOutline />
            },
            {
                key: '/index/cate',
                title: '分类',
                icon: <AppstoreOutline />
            },
            {
                key: '/index/shopcart',
                title: '购物车',
                icon: <ShopbagOutline />
            },
            {
                key: '/index/mine',
                title: '我的',
                icon: <UserOutline />
            },
        ]
    }

    //点击Tabbar的按钮时执行
    onChange(key:any){
        this.props.history.push(key);
    }
    render() {
        return (
            <TabBar className='mytabbar' onChange={(key)=>{ this.onChange(key) }}>
                {
                    this.state.tabs.map(item=>(
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))
                }
            </TabBar>
        );
    }
}

export default withRouter(Tabbar);